<template>
  <div>
    <span v-for="(item, index) in listData" :key="index"
      >{{ index + 1 }}: {{ item }}</span
    >
  </div>
</template>

<script>
export default {
  props: { list: Array },
  data() {
    return {
      listData: ['未完成', '未完成', '未完成', '未完成', '未完成']
    }
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        this.listData = newValue.map(element => {
          if (element === '') {
            return (element = '未完成')
          } else if (element) {
            return (element = '回答正确')
          } else {
            return (element = '回答错误')
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>
